<template>
    <div class="not-found">
      <!-- 装饰背景放在最底层 -->
      <div class="decorations">
        <div v-for="n in 12" 
             :key="n" 
             class="shape"
             :style="{
               '--delay': `${n * 0.1}s`,
               '--rotation': `${n * 30}deg`
             }"
        ></div>
      </div>
  
      <!-- 内容区域确保在最上层 -->
      <div class="content-wrapper">
        <div class="content">
          <div class="particles">
            <div v-for="n in 50" 
                 :key="n" 
                 class="particle"
                 :style="{
                   '--x': `${Math.random() * 100}%`,
                   '--y': `${Math.random() * 100}%`,
                   '--duration': `${2 + Math.random() * 4}s`,
                   '--delay': `${Math.random() * 2}s`,
                   '--size': `${2 + Math.random() * 3}px`,
                   '--color': `hsl(${200 + Math.random() * 50}, 70%, 60%)`
                 }"
            ></div>
          </div>
  
          <div class="error-code">
            <span class="digit">4</span>
            <span class="digit zero">
              <div class="circle-wrapper">
                <div class="circle"></div>
              </div>
            </span>
            <span class="digit">4</span>
          </div>
  
          <h1 class="title">啊哦！页面不见了</h1>
          <p class="description">别担心，让我们带你回到正确的地方</p>
          
          <!-- 确保按钮可见 -->
          <div class="actions">
            <router-link to="/" class="pill-btn home-btn">
              <div class="btn-content">
                <el-icon><HomeFilled /></el-icon>
                <span>返回主页</span>
              </div>
            </router-link>
            <button type="button" class="pill-btn back-btn" @click="handleBack">
              <div class="btn-content">
                <el-icon><Back /></el-icon>
                <span>返回上页</span>
              </div>
            </button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { HomeFilled, Back } from '@element-plus/icons-vue'
  import gsap from 'gsap'
  
  const router = useRouter()
  
  const handleBack = () => {
    router.back()
  }
  
  onMounted(() => {
    // ... animations remain unchanged ...
  })
  </script>
  
  <style lang="scss" scoped>
  .not-found {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f2f5;
    overflow: hidden;
  
    // 装饰背景放在最底层
    .decorations {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }
  
    // 内容区域确保在最上层
    .content-wrapper {
      position: relative;
      z-index: 10;
      width: 100%;
      max-width: 600px;
      margin: 20px;
  
      .particles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
      }
  
      .content {
        position: relative;
        background: white;
        padding: 60px 40px;
        border-radius: 24px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        text-align: center;
  
        .error-code {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          margin: 0 auto 40px;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
          max-width: fit-content;
  
          .digit {
            font-size: 160px;
            font-weight: 700;
            line-height: 1;
            color: #2962FF;
            text-shadow: 4px 4px 0 rgba(41, 98, 255, 0.1);
            animation: bounce 1s ease-in-out infinite alternate;
            display: flex;
            align-items: center;
            justify-content: center;
  
            &.zero {
              width: 140px;
              height: 140px;
              display: flex;
              align-items: center;
              justify-content: center;
              animation: none;
  
              .circle-wrapper {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                animation: rotate 10s linear infinite;
  
                .circle {
                  width: 100%;
                  height: 100%;
                  background: #2962FF;
                  border-radius: 50%;
                  animation: pulse 2s ease-in-out infinite;
                }
              }
            }
  
            &:nth-child(1) {
              animation-delay: -0.2s;
            }
  
            &:nth-child(3) {
              animation-delay: 0.2s;
            }
          }
        }
  
        .title {
          font-size: 32px;
          font-weight: 600;
          color: #1a1a1a;
          margin: 0 auto 16px;
          text-align: center;
          line-height: 1.4;
        }
  
        .description {
          font-size: 16px;
          color: #666;
          margin: 0 auto 40px;
          text-align: center;
          line-height: 1.6;
          max-width: 400px;
        }
  
        .actions {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          margin: 0 auto;
          padding: 0;
          max-width: fit-content;
  
          .pill-btn {
            position: relative;
            min-width: 140px;
            height: 42px;
            padding: 0 20px;
            border: none;
            border-radius: 21px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 2;
            text-decoration: none;
            display: inline-flex;
  
            .btn-content {
              position: relative;
              z-index: 2;
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 6px;
              width: 100%;
              height: 100%;
  
              .el-icon {
                font-size: 15px;
              }
            }
  
            &.home-btn {
              background: linear-gradient(135deg, #2962FF, #2979FF);
              color: white;
              box-shadow: 0 4px 12px rgba(41, 98, 255, 0.2);
  
              &:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(41, 98, 255, 0.3);
                background: linear-gradient(135deg, #1E54E7, #2466E6);
              }
  
              &:active {
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(41, 98, 255, 0.25);
              }
            }
  
            &.back-btn {
              background: white;
              color: #2962FF;
              border: 1.5px solid rgba(41, 98, 255, 0.2);
              box-shadow: 0 4px 12px rgba(41, 98, 255, 0.08);
  
              &:hover {
                border-color: #2962FF;
                background: rgba(41, 98, 255, 0.02);
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(41, 98, 255, 0.12);
              }
  
              &:active {
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(41, 98, 255, 0.1);
              }
            }
          }
        }
      }
    }
  }
  
  // 添加新的动画
  @keyframes bounce {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-20px);
    }
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(0.95);
      opacity: 0.8;
    }
  }
  
  // 响应式适配
  @media (max-width: 640px) {
    .not-found {
      .content-wrapper {
        .content {
          padding: 40px 20px;
  
          .error-code {
            gap: 8px;
  
            .digit {
              font-size: 120px;
  
              &.zero {
                width: 100px;
                height: 100px;
              }
            }
          }
  
          .title {
            font-size: 24px;
            margin-bottom: 12px;
          }
  
          .description {
            font-size: 14px;
            margin-bottom: 32px;
            padding: 0 16px;
          }
  
          .actions {
            flex-direction: column;
            width: 100%;
            gap: 10px;
            padding: 0 16px;
  
            .pill-btn {
              width: 100%;
              max-width: 280px;
            }
          }
        }
      }
    }
  }
  
  // 暗黑模式适配
  :root.dark {
    .not-found {
      background: #000;
  
      .content-wrapper {
        .content {
          background: #1a1a1a;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  
          .error-code {
            .digit {
              color: #3d84ff;
              text-shadow: 4px 4px 0 rgba(61, 132, 255, 0.2);
  
              &.zero {
                .circle-wrapper {
                  .circle {
                    background: #3d84ff;
                  }
                }
              }
            }
          }
  
          .title {
            color: rgba(255, 255, 255, 0.9);
          }
  
          .description {
            color: rgba(255, 255, 255, 0.6);
          }
  
          .actions {
            .pill-btn {
              &.home-btn {
                background: linear-gradient(135deg, #3d84ff, #2979FF);
                box-shadow: 0 4px 12px rgba(61, 132, 255, 0.3);
  
                &:hover {
                  background: linear-gradient(135deg, #2b6be6, #1e6be3);
                  box-shadow: 0 6px 16px rgba(61, 132, 255, 0.4);
                }
              }
  
              &.back-btn {
                background: rgba(255, 255, 255, 0.05);
                color: rgba(255, 255, 255, 0.9);
                border: 1.5px solid rgba(255, 255, 255, 0.1);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  
                &:hover {
                  background: rgba(255, 255, 255, 0.08);
                  border-color: rgba(255, 255, 255, 0.2);
                  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
                }
              }
            }
          }
        }
      }
  
      .particles {
        .particle {
          --color: hsla(215, 100%, 70%, 0.2);
        }
      }
    }
  }
  </style>